<script lang="ts" setup>
import { defineProps } from "vue";

defineProps(["picUrl", "name", "trackCount", "id", "playCount", "subscribedCount", "creator", "userId"])
</script>

<template>
  <div class="listModeItem">
    <div class="leftWraps">
      <RouterLink :to="`/SongListDetail/${id}`">
        <img :src="`${picUrl}`" alt="">
      </RouterLink>
      <p class="songText">
        <RouterLink :to="`/SongListDetail/${id}`">
          {{ name }}
        </RouterLink>
      </p>
    </div>
    <div class="rightWrap">
      <div class="songNum">歌曲: {{ trackCount }}首</div>
      <div class="songText">
        <RouterLink :to="{ path: '/userDetail', query: { id: userId } }">
          {{ creator }}
        </RouterLink>
      </div>
      <div class="shareNum">
        <span class="iconfont icon-wenjianjia"></span>
        <span class="num">{{ subscribedCount }}</span>
      </div>
      <div class="playNum">
        <span class="iconfont icon-yunhang"></span>
        <span class="num">{{ playCount }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.listModeItem {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80px;

  .leftWraps {
    display: flex;
    align-items: center;
    width: 50%;
    height: 50%;
    padding-left: 25px;
    box-sizing: border-box;

    img {
      width: 65px;
      border-radius: 8px;
    }

    .songText {
      margin-left: 10px;
      font-size: $font-size-sm;
      font-family: $textFont;
      color: $font_main_color;
    }
  }

  .rightWrap {
    flex: 1;
    display: flex;
    align-items: center;

    .songText,
    .shareNum,
    .playNum,
    .songNum {
      width: 25%;
      font-size: $font-size-xs;
      font-family: $textFont;
      color: $font_second_color;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .num {
        vertical-align: 2px;
        font-size: $font-size-sm;
        margin-left: 5px;
      }

      .icon-wenjianjia {
        font-size: $font-size-lg;
      }

      .icon-yunhang {
        font-size: $font-size-lg;
      }
    }
  }

  &:nth-child(odd) {
    background-color: rgb(250, 250, 250);
  }

  &:hover {
    background-color: rgb(241, 242, 243);
  }
}
</style>
